<?php
require("dbconfig.php");
require("./class/sqlHelper.php");
$db = new Opmysqli(HOST, USER, PASSWORD, DBNAME);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>当前商品</title>	
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
	font-family:微软雅黑;
	font-size:16px;
	color:#036;
	}
  .div_con{
    margin-top:25px;
  }
  .div_con1{
    margin-top:10px;
  }
  .hero_unit{
    width:300px;
    height:120px;
    background-color:#EEEEEE;
    margin:0 auto;
    padding-top:20px;
    padding-left:15px;
  }
  .quan_con{
    margin-left:34px;
  }
  .cart_con{
  margin-left:80px;
  margin-top:20px;
}

</style>
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<div class="container">
    <?php 
    require("./help/myCartHtml.php"); 
    echo "<div class=\"div_con\">";
    if (!empty($_GET['id']))
    {
      $query1 = "select id, name, price, pic, note from clothes where id = {$_GET['id']}";
      $res1 = $db->getRowsArray($query1);
      $query2 = "select sizeCode, longth, width from clothes_parameter where id = {$_GET['id']}";
      $res2 = $db->getRowsArray($query2);
      $arr1 = array();
      $arr2 = array();
      $i = 0;
      if ($res1 && $res2)
      {
          foreach ($res1 as $arr_tem)
          {
              $arr1 = $arr_tem;
          }
          foreach ($res2 as $arr_tem1)
          {
              $arr2[$i] = $arr_tem1;
              $i++;
          }
      }
?>

      <div class="row">
        <div class="span10 offset1">
          <div class="row">
            <div class="span5">
              <img src="./uploads/<?php echo $arr1['pic']; ?>">
              <p class="div_con1">衣服描述：<span style="color:#0A1FFC;"><?php echo $arr1['note']?></span></p>
            </div>
            <div class="span5">
              <p class="page-header"><strong><?php echo $arr1['name'];?></strong></p>
              <form action="addCart.php?id=<?php echo $arr1['id'];?>" method="post">
              <table  class="table table-hover">
              <thead>
                <tr>
                  <td><strong><span style="font-size:17px; color:">价格：</span><span style="color:#DF3C34; font-size:30px;">&yen;&nbsp;<?php echo $arr1['price'];?></span></strong></td>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                    <td>码</td>
                    <td>长度</td>
                    <td>宽度</td>
                    <td>选择</td>
                </tr>
                <?php
                $color = array("error", "warning", "info", "error", "warning");
                for ($i = 0; $i < count($arr2); $i++)
                {
                ?>
                
                  <tr class="<?php echo $color[$i]; ?>">
                    <td><?php echo $arr2[$i]["sizeCode"];?>&nbsp;</td>
                    <td><?php echo $arr2[$i]["longth"];?>&nbsp;cm</td>
                    <td><?php echo $arr2[$i]["width"];?>&nbsp;cm</td>
                    <td><label for="<?php echo "choose".($i+1); ?>"><input type="radio" name="choose" id="<?php echo "choose".($i+1); ?>" value="<?php echo $arr2[$i]['sizeCode']; ?>"></label></td>
                  </tr>         
                <?php
                }
                ?>
              </tbody>
            </table>
            <div class="input-prepend input-append quan_con">
              <span class="add-on"><a href="javascript:void(0)" onclick="setAmount.reduce('#append')" style="text-decoration:none;">-</a></span>
              <input class="span1" id="append" name="append" onkeyup="setAmount.modify('#append')" type="text" value="1">
              <span class="add-on"><a href="javascript:void(0)" onclick="setAmount.add('#append')" style="text-decoration:none;">+</a></span>
              <span class="add-on">件</span>
            </div>
            <span id="info_res" style="color:red;"></span>
            <div class="hero_unit"> 
              <p>In twenty-first Century, or electronic commerce, or no commerce</p>
            <p><a class="btn btn-warning btn-large" href="#">立刻购买</a>
              <button class="btn btn-primary btn-large" type="submit" id="love">加入购物车</button></p>
            </div>
          </form>
  
            </div>
          </div>
        </div>
      </div>

      <div class="row" style="margin-bottom:20px;">
        <div class="span8 offset1">
          <div class="row">
            <div class="span4"><img src="./media/clothes1.png" title="Your fit clothes"></div>
            <div class="span4">
              <p class="text-error" style="line-height:1.6em; letter-spacing:0.2em;">
                亲爱的您一定可以看到左边的衣服图片，如果那就是您已经买的、如今感觉比较适合
                的衣服，然后您用相应的工具量了这件衣服相应<strong>长度</strong>和<strong>宽度</strong>，然后和我们电子商务网
                站里的衣服的<strong>长度</strong>和<strong>宽度</strong>进行比较。这样您也许能更精确地找到您所希望的、合适大小的衣服！
              </p>
            </div>
          </div>
        </div>
      </div>
<?php
    }
    echo "</div>";
    $db->close_conn();
    ?>

  </div>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var setAmount=
        {
            min:0,
            max:999,
            reduce:function(obj)  //减小
            {
                var x = $.trim($(obj).val());
                x--;
                if (x > this.min)
                {
                    $(obj).val(x);
                }
                else
                {
                   //当是最大值999时，撤销其click事件
                    $(obj).val(1);
                    $(obj).focus();
                }
            },
            add:function(obj)
            {
                var x = $.trim($(obj).val());
                x++;
                if (x <= this.max)
                {
                    $(obj).val(x);
                }
                else
                {
                   //当是最大值999时，撤销其click事件
                    $(obj).val(999);
                    $(obj).focus();
                }
            },
            modify:function(obj)
            {
                //获取当前值
                var x = $.trim($(obj).val());
                var t = parseInt(x);

               // alert(typeof(t));
                //alert(typeof(this.min));   测试其类型，
                if (t < this.min || t == 0)
                {
                    $(obj).val(1);
                    $(obj).focus();
                }
                if(t > this.max)
                {
                    $(obj).val(999);
                    $(obj).focus();
                } 
                //通过正则匹配过滤相应的数据
                var regex1 = /^\D+$/;  //如果全是非数字字符
                var regex2 = /^(\d)+(\D)+$/; 
                if (regex1.test(x))
                {
                  $(obj).val(1);
                  $(obj).focus();
                }
                var resArray = regex2.exec(x);
                $(obj).val(resArray[1]);
            }
        }

function checkVali()
{
   var val = $('input:radio[name="choose"]:checked').val();
   var ret = false;
   var errMsg = '';
   if(val == null)
   {
      errMsg = "亲,请选择一个码！";
   }
   else
   {
      ret = true;
   }
   $("#info_res").text(errMsg);
    return ret;
}
$(document).ready(
  function()
  {

    $(":submit").click(
      function()
      {
        if(!checkVali())
        {
            return false;
        }
      }
      );
  }
);
</script>
</body>
</html>
    



